<template>
  <view class="form-wrap">
    <view class="form-item u-border-bottom">
      <view class="item-content u-col-center">
        <view class="item-title">请输入渠道推荐人ID:</view>
        <input
          class="u-m-r-10 u-flex-1 input-box"
          placeholder="请输入渠道推荐人ID"
          v-model="form.userBusinessId"
          type="text"
        ></input>
        <view v-if="userData.nickName" class="user-nickname">用户昵称： {{ userData.nickName }}</view>
        <view v-if="userData.mobile" class="user-nickname">用户账号： {{ userData.mobile }}</view>
        <i-buttons radius="10rpx" color="#000"  @click="search">查询</i-buttons>
      </view>
    </view>
    <view class="form-item">
      <i-buttons bgColor="#ff5800" color="#fff" radius="10rpx" :disabled="loading" @click="submit">
        {{ loading ? "提交中..." : "确认" }}
      </i-buttons>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { reactive, getCurrentInstance, ref } from 'vue'
import { getUserByBusinessId, editChannelRecommend } from '../../api/index'

// 定义 Form 接口
interface Form {
  userBusinessId: string;
  idCard: string;
}

// 定义整个组件响应式状态
const form = reactive({
  
    userBusinessId: "",
    idCard: "",

})
const loading = ref(false)
const userData = reactive({
  nickName: "",
  mobile: "",
})

// 获取全局 proxy，用于调用全局方法（如 $u.toast、$http）
const { proxy } = getCurrentInstance()!

// 提交方法
function submit() {
  if (!form.userBusinessId) {
    uni.showToast({
      title: "请输入渠道推荐人ID",
      icon: "none",
    })
    return
  }
  uni.showModal({
    title: "提示",
    content:
      "渠道推荐人添加成功后，无法修改，是否确认添加？",
    success: (res: any) => {
      if (res.confirm) {
        loading.value = true
        editChannelRecommend({
          userBusinessId: form.userBusinessId,
        })
          .then((res: any) => {
            uni.navigateBack()
          })
          .finally(() => {
            loading.value = false
          })
      }
    },
  })
}

// 搜索方法
async function search() {
  if (!form.userBusinessId) {
    uni.showToast({
      title: "请输入渠道推荐人ID",
      icon: "none",
    })
    return
  }
  try {
    const {data} = await getUserByBusinessId(form.userBusinessId)
    userData.nickName = data.nickName
    userData.mobile = data.mobile
  } catch (error) {
    userData.nickName = ""
    userData.mobile = ""
  }
}
</script>

<style scoped lang="scss">
.form-wrap {
  padding: 0 30rpx;
  .input-box {
    padding: 12rpx 20rpx;
    border-bottom: 1rpx solid #ccc;
    margin: 12rpx 0;
  }
  .user-nickname {
    font-size: 22rpx;
    color: #666;
    line-height: 48rpx;
    // padding: 4rpx 0;
    margin: 6rpx 0;
  }
  .form-item {
    display: flex;
    flex-direction: column;
    font-size: 28rpx;
    padding: 20rpx 0;
    // color: $u-main-color;
    box-sizing: border-box;
    // line-height: $u-form-item-height;
    width: 100%;

    .item-title {
      width: 100%;
      font-size: 30rpx;
      color: #333;
      font-weight: 600;
      text-align: left;
    }

    .message-error {
      text-align: left;
      font-size: 24rpx;
      line-height: 24rpx;
      // color: $u-type-error;
      margin-top: 12rpx;
      margin-left: 120rpx;
    }
  }
  .primary-btn {
    width: 100%;
    height: 80rpx;
    background: linear-gradient(90deg, #e9b461, #eecc89);
    color: #fff;
    text-align: center;
    line-height: 80rpx;
  }
}
</style>
